<template>
  <f-page-layout title="动态表格" :actions="actions">
    <div style="height: 50%" class="bg-white">
      <f-dy-table
        ref="dyTable"
        style="height: 100%"
        :config="options"
        :formItems="formItems"></f-dy-table>
    </div>
    <f-dy-editor style="height: 50%" v-model:value="options"></f-dy-editor>
  </f-page-layout>
</template>
<script lang="ts" setup>
import { http } from 'fok-ui';
import { h, ref, watch } from 'vue';
const dyTable = ref();
const actions = ref([
  {
    label: '新增护理记录',
    type: 'primary',
    click: () => {
      dyTable.value.add();
    }
  }
]);

const options = ref({
  type: 'table',
  title: '护理记录',
  mainTitle: '阜康医院',
  config: {
    columns: [
      {
        title: '日期\n时间',
        field: 'col1',
        editType: 'date',
        minWidth: 150,
        props: {
          format: 'YYYY-MM-DD HH:mm',
          valueFormat: 'YYYY-MM-DD HH:mm'
        }
      },
      {
        minWidth: 100,
        title: '意识',
        field: 'col2',
        editType: 'super-set',
        props: {
          options: [
            { label: '清晰', value: '001' },
            { label: '昏睡', value: '002' }
          ]
        }
      },
      {
        minWidth: 50,
        title: '体温',
        field: 'col3',
        children: [{ minWidth: 100, title: '℃', field: 'col31', editType: 'input' }]
      },
      {
        minWidth: 50,
        title: '心率/脉搏',
        field: 'col4',
        children: [{ minWidth: 100, title: '次/分', field: 'col41', editType: 'input' }]
      },
      {
        minWidth: 50,
        title: '呼吸',
        field: 'col5',
        children: [{ minWidth: 100, title: '次/分', field: 'col51', editType: 'input' }]
      },
      {
        title: '血压(mmHg)',
        field: 'col6',

        children: [
          {
            editType: 'dy-inputs',
            minWidth: 80,
            title: 'SBP/DBP',
            field: 'col61',
            dataType: 'object',
            props: {
              fields: [{ field: 'col611' }, { field: 'col612' }]
            }
          }
        ]
      },
      {
        minWidth: 100,
        title: '血氧饱和度',
        field: 'col7',
        children: [{ minWidth: 100, title: '%', field: 'col71', editType: 'input' }]
      },
      {
        title: '氧疗/(L/min)',
        field: 'col8',
        minWidth: 100,
        children: [
          { minWidth: 100, title: '鼻导管', field: 'col81', editType: 'input' },
          { minWidth: 100, title: '面罩', field: 'col82', editType: 'input' }
        ]
      },
      {
        title: '入量',
        field: 'col9',
        minWidth: 280,
        dataType: 'array',
        children: [
          {
            minWidth: 150,
            editType: 'dy-array',
            props: { type: 'input' },
            arrayField: 'col9',
            title: '名称',
            field: 'col91'
          },
          {
            minWidth: 80,
            editType: 'dy-array',
            props: { type: 'input' },
            title: 'ml',
            arrayField: 'col9',
            field: 'col92'
          },
          {
            minWidth: 80,
            editType: 'dy-array',
            field: 'col93',
            dataType: 'none',
            props: {
              type: 'dy-operates',
              props: {
                fields: ['col91', 'col92', 'col93']
              }
            }
          }
        ]
      },
      {
        title: '出量',
        field: 'col10',
        minWidth: 280,
        dataType: 'array',
        children: [
          {
            minWidth: 150,
            editType: 'dy-array',
            arrayField: 'col10',
            props: { type: 'input' },
            title: '名称',
            field: 'col101'
          },
          {
            minWidth: 80,
            editType: 'dy-array',
            arrayField: 'col10',
            props: { type: 'input' },
            title: 'ml',
            field: 'col102'
          },
          {
            minWidth: 80,
            editType: 'dy-array',
            field: 'col103',
            dataType: 'none',
            props: {
              type: 'dy-operates',
              props: {
                fields: ['col101', 'col102', 'col103']
              }
            }
          }
        ]
      },
      {
        minWidth: 30,
        title: ' ',
        field: 'col11',
        dataType: 'none'
      },
      { minWidth: 30, title: ' ', field: 'col12', dataType: 'none' },
      {
        minWidth: 260,
        title: '病情观察护理措施',
        field: 'col13',
        editType: 'input-textArea'
      },
      {
        minWidth: 100,
        title: '签名',
        field: 'col14',
        editType: 'dy-sign'
      }
    ],
    topForm: {
      layout: 'horizontal',
      colSpan: 6,
      labelWidth: 130,
      columns: [
        { label: '脐静脉置管长度', field: 'new001114' },
        { label: 'PICC置管第几天', field: 'new001117' },
        { label: '拔管时间', field: 'new001136' },
        { label: '拔管原因', field: 'new001137' }
      ]
    },
    addForm: {
      layout: 'horizontal',
      colSpan: 24,
      labelWidth: 130,
      columns: [
        { label: '脐静脉置管长度', field: 'new001114' },
        { label: 'PICC置管第几天', field: 'new001117' },
        { label: '拔管时间', field: 'new001136' },
        { label: '拔管原因', field: 'new001137' },
        { label: 'PICC置管长度', field: 'new001118' },
        { label: 'PICC外留长度', field: 'new001119' },
        { label: '臀围', field: 'new001120' },
        { label: '是否更换接头', field: 'new001121' },
        { label: '呼吸机模式', field: 'new001124' },
        { label: 'PICC置管日期', field: 'new001135' },
        { label: '其他', field: 'new001140' }
      ]
    }
  }
});
watch(
  () => options,
  (v) => {
    console.log('config:cahnge', v);
  },
  { deep: true }
);
const formItems = ref<any[]>([]);
http
  .post('/clinical/fromItem/queryTree', { t: 1741158965836, id: '1899643566207897600' })
  .then((res: any) => {
    formItems.value = res.data;
  });
</script>

<style lang="css">
.p0 {
  padding: 0 !important;
  .vxe-cell {
    padding: 0 !important;
  }
}
.v-text {
  writing-mode: vertical-lr;
  text-align: left !important;
}
</style>
